import React, {Component} from 'react'
import PropTypes from 'prop-types'

class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    const {delItem, index} = this.props
    delItem(index)
  }
  componentWillMount () {
    console.log('first child componentWillMount')
  }
  componentDidMount () {
    console.log('first child componentDidMount')
  }
  componentWillReceiveProps () {
    console.log('first child componentWillReceiveProps')
  }
  shouldComponentUpdate () {
    console.log('first child shoulComponentUpdate')
    return true
  }
  componentWillUpdate () {
    console.log('first child componentWillUpdate')
  }
  componentDidUpdate () {
    console.log('first child componentDidUpdate')
  }
  componentWillUnmount () {
    console.log('first child componentWillUnmount')
  }
  render() {
    console.log('first child render')
    const { content, test} = this.props
    return (
      <li onClick={this.handleClick}>
        {test}-{content}
      </li>
    )
  }
}
TodoItem.propTypes = {
  content: PropTypes.string.isRequired,
  delItem: PropTypes.func,
  index: PropTypes.number,
  test:PropTypes.string.isRequired
}

TodoItem.defaultProps = {
  test: 'WE'
}
export default TodoItem